<template>
    <div class="personalTeacher">
        <div class="personalTeacherContent">
          <div class="contentTitle">
            <div class="titleIcon">
              <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fteacher%402x.png" lazy-load>
            </div>
            <div class="titleText">本期辅导老师：</div>
            <div class="titleTeacher">{{teacherData.teacher_name}}</div>
          </div>
          <div class="contentReminder">
            <div class="reminderTitle">验证申请时清备注学号：</div>
            <div class="reminderNumber">{{studentId}}</div>
            <div class="reminderButton" @click.stop.prevent="copyStudentData">复制</div>  
          </div>
          <div class="contentRemarks">老师会在1-3天内通过验证，各位请稍安勿躁。</div>
          <div class="contentImage" @click.stop.prevent="showContentImage(teacherData.teacher_data)" v-if="teacherData.teacher_data">
            <img :src="teacherData.teacher_data" lazy-load  mode="widthFix">
          </div>
        </div>
    </div>
</template>

<script>
import {obtainPersonalTeacher} from '@/config/api'
import {showPictureCard} from '@/config/wUtils'
export default {
  data () {
    return {
      // 老师信息数据
      teacherData: [],
      // 学员id
      studentId: ''
    }
  },
  mounted () {
    let self = this
    // 初始化 我的老师 界面
    self.initPersonalTeacher()
    console.log(wx.getStorageSync('batch_id'), '.............')
  },
  methods: {
    // 初始化 我的老师 界面
    async initPersonalTeacher () {
        let self = this;
        const teacherInfo = await obtainPersonalTeacher(wx.getStorageSync('batch_id'))
        // 学员id
        self.studentId = wx.getStorageSync('student_id')
        if (teacherInfo.status === 200) {
          // 老师信息数据
          self.teacherData = teacherInfo.data
        }
        console.log(self.teacherData, '初始化 我的老师 界面')
    },
    // 拷贝学员信息
    copyStudentData () {
      let self = this;
      wx.setClipboardData({
        data: self.studentId,
        success(res) {
          console.log(self.studentId, '拷贝学员信息 success')
        }
      });
    },
    // 展示 图片
    showContentImage(itemImage) {
      let self = this;
      const imageList = []
      imageList.push(itemImage)
      showPictureCard(itemImage, imageList)
    }
  }
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalTeacher {
    width: 100%;
    // height: 100%;
    background: #ffffff;
    .personalTeacherContent{
      // width: 100%;
      position: relative;
      width: 686rpx;
      margin: 0 auto;
      margin-top: 37rpx;
      box-shadow: 0 0 10rpx 2rpx rgba(198,198,198,0.50);
      border-radius: 10rpx;
      .contentTitle{
        // width: 480rpx;
        // margin: 0rpx auto;
        // text-align: center;
        font-size: 0;
        // margin-left: 66rpx;
        // margin-bottom: 27rpx;

        margin-left:21rpx;
        margin-bottom:37rpx;
        padding-top:48rpx;

        div{
          display: inline-block;
          vertical-align: middle;
          height: 48rpx;
          line-height: 48rpx;
        }
        .titleIcon{
          width: 54rpx;
          height: 36rpx;
          line-height: 36rpx;
          margin-right: 13.5rpx;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .titleText{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #333333;
          letter-spacing: 0.69rpx;
        }
        .titleTeacher{
          font-family: PingFangSC-Regular;
          font-size: 34rpx;
          color: #333333;
          letter-spacing: 0.69rpx;

          width: 230rpx;
          white-space: nowrap;
          overflow: hidden;
          /* 文本超出变省略号 */
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }
      .contentReminder{
        // margin-left: 65.5rpx;
        // margin-bottom: 20rpx;

        margin-left: 20.5rpx;
        margin-bottom: 18rpx;
        div{
          display: inline-block;
          vertical-align: middle;
          line-height: 1;
        }
        .reminderTitle{
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #333333;
          letter-spacing: 0.48rpx;
        }
        .reminderNumber{
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #333333;
          letter-spacing: 0.48rpx;
        }
        .reminderButton{
          width: 97rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: #FFFFFF;
          border: 1rpx solid #DCDCDC;
          border-radius: 6rpx;
          // margin-left: 29.5rpx;
          margin-left: 11.5rpx;
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          color: #333333;
          letter-spacing: 0.48rpx;
          text-align: center;
        }
      }
      .contentRemarks{
        // margin-left: 65.5rpx;
        // margin-bottom: 32rpx;
        margin-left: 20rpx;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #333333;
        letter-spacing: 0.48rpx;
        padding-bottom:29rpx;
      }
      .contentImage{
        position: absolute;
        top: 32rpx;
        right: 25rpx;
        background: #FFFFFF;
        box-shadow: 0 0 10rpx 1rpx rgba(181,181,181,0.30);
        border-radius: 4rpx;
        width: 80rpx;
        height:80rpx;
        // margin: 0rpx auto;
        // margin-top: 30rpx;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
}
</style>
